import React from "react";
import ReactDOM from "react-dom/client";
import { hook, useHighState, useReducer } from "./hook/index";

function reducer(state, action) {
    switch (action.type) {
        case "add":
            return state + 1;
        default:
            return state; // 返回还是初始值
    }
}

function App() {
    let [state, dispatch] = useReducer(reducer, 0);
    // useReducer 接受两个参数一个是函数，另一个为初始值
    // 返回的是初始值和派发类型

    //! useHighState 通过 useReducer 改造封装而来
    let [number, setNumber] = useHighState(18);

    return (
        <div>
            <h1>{state}</h1>
            <button onClick={() => dispatch({ type: "add" })}> ++ </button>
            <h2>{number}</h2>
            <button onClick={() => setNumber(number + 1)}> ++ </button>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById("root"));

export function render() {
    hook.index = 0; // 每次渲染都得重置指针从开头进行匹配, 不然进行 useState() 执行会在执行栈后面添加
    root.render(<App />);
}
render();
